function smartReminder(arr) {
    if (arr.length) {
        $('.smart-tip').show(100);
        let str = "";
        for (let obj of arr) {
            str += `<li class="list-group-item tip-li" attr-id="${obj.id}">${obj.name}</li>`
        }
        $('.smart-tip').html(str);
    } else {
        $('.smart-tip').hide(100);
    };

    $('.smart-tip').on('click', '.tip-li', function () {
        $('.smart-tip').hide(100);
        let id = $(this).attr("attr-id");
        for (let obj of arr) {
            if (obj.id == id) {
                let str = `
                    <div class="card" style="width: 21rem;">
                        <div class="card-body rounded">
                            <h5 class="card-title" id="link-card-name">${obj.name}</h5>
                            <p class="card-text">
                            <ul>
                                <li id="link-card-id" style="display: none;">${obj.id}</li>
                                <li><span class="item-label">分组</span><span class="item-content" id="link-card-type">${obj.type.name}</span>
                                </li>
                                <li><span class="item-label">手机</span><span class="item-content" id="link-card-phone">${obj.phone}</span></li>
                                <li><span class="item-label">邮箱</span><span class="item-content" id="link-card-email">${obj.email}</span></li>
                            </ul>
                            </p>
                            <button type="button" class="btn btn-outline-success change-btn">change</button>
                            <button class="btn btn-outline-danger del-btn" btn-id="${obj.id}">delete</button>
                        </div>
                    </div>
                `;
                $('main').html(str);
            }
        }
    });
}

$(function () {
    $('main').on('click', '.change-btn', function () {
        $('#add').css({
            'top': 0
        });

        let that = $(this).parent();
        $('#linkId').val(that.find('#link-card-id').text());
        $('#name').val(that.find('#link-card-name').text());
        let type = 0;
        switch (that.find('#link-card-type').text()) {
            case "亲人":
                type = 1;
                break;
            case "同事":
                type = 2;
                break;
            case "同学":
                type = 3;
                break;
            case "朋友":
                type = 4;
                break;
            default:
                break;
        }
        $('#type').val(type);
        $('#phone').val(that.find('#link-card-phone').text());
        $('#email').val(that.find('#link-card-email').text());
    });

    $('.edit-form').on('click', '.cancle-change-btn', function () {
        $('#add').css({
            'top': '100%'
        });
    });


    $('.add-btn').on('click', function () {
        $('#add').css({
            'top': 0
        });
    });

    $('#search-inp').on('input', function () {
        let val = $(this).val();
        if (val == "") {
            $('.smart-tip').hide(100);
            return;
        }

        $.ajax({
            type: 'post',
            url: '/ContactPerson/searchLink',
            data: {
                'val': val
            },
            success: function (res) {
                console.log("success")
                smartReminder(res);
            },
            error: function (err) {
                console.log(err);
            }
        })
    })
});